<template>
  <div class="detail">
    <dl v-show="active">
      <dt>{{blog.name}} <span>{{blog.author}}</span></dt>
      <dd>时间：{{blog.date1}}-{{blog.date2}}</dd>
      <dd>标签：
        <span v-for="tag in blog.tag">{{tag}} </span>
      </dd>
      <dd>{{blog.desc}}</dd>
      <dd>
        <br>
        <router-link :to="'/edit/'+id"> <!--tag="button" -->
          <el-button type="primary">编辑</el-button>
        </router-link>
        <el-button @click="deleteBlog" type="danger">删除</el-button>
      </dd>
    </dl>
    <p v-show="!active">
      {{msg}}
    </p>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "Detail",
    data() {
      return {
        active:true,
        id: this.$route.params.id,// 通过路由获取id
        blog: {},
        msg:''
      }
    },
    created() {
      // 请求列表数据
      /*fetch('https://wd7995297966yjuctj.wilddogio.com/blogs/' + this.id + '.json')
        .then(data => {
          return data.json()
        })
        .then(data => {
          this.blog = data;
        })*/

      axios.get('https://wd7995297966yjuctj.wilddogio.com/blogs/' + this.id + '.json')
        .then(data => {
          this.blog = data.data;
        })
    },
    methods:{
      deleteBlog(){
        /*fetch('https://wd7995297966yjuctj.wilddogio.com/blogs/' + this.id + '.json',{
          method: "delete",
        })
          .then(data => {
            if(data.status == 200) {
              this.msg = '删除成功'
            }else{
              this.msg = '删除失败'
            }
            this.active = false;
          })*/


        axios.delete('https://wd7995297966yjuctj.wilddogio.com/blogs/' + this.id + '.json')
          .then(data => {
            if(data.status == 200) {
              this.msg = '删除成功'
            }else{
              this.msg = '删除失败'
            }
            this.active = false;
          })

      }
    }
  }
</script>

<style scoped>
  .detail {
    width: 960px;
    margin: 0 auto;
    padding-top: 40px;
  }

  .detail dl {
    margin-bottom: 30px;
  }

  .detail dl dt {
    line-height: 30px;
    cursor: pointer;
    display: inline-block;
  }

  .detail dl dd {
    font-size: 14px;
    color: #666;
    line-height: 22px;
  }
</style>
